<template>
  <div class="CommonRate">
    <div class="label" :class="{ required }">{{ label }}</div>
    <van-rate :value="value" :disabled="isView" @change="e => currentValue = e.detail"></van-rate>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    isView: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
    },
  },
  data () {
    return {
      currentValue: this.value,
    }
  },
  watch: {
    value: {
      immediate: true,
      handler () {
        this.currentValue = this.value
      },
    },
    currentValue: {
      deep: true,
      handler () {
        this.$emit('input', this.currentValue)
      },
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.CommonRate {
	.label {
		@include label;
	}
}
</style>
